﻿@using QH.JobBack.Model;
@{
    var piclist = ViewBag.pictureInfo as List<PictureInfo>;
}
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
    <!-- Google Chrome Frame也可以让IE用上Chrome的引擎: -->
    <meta name="renderer" content="webkit">
    <!--国产浏览器高速模式-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="1024招聘" />
    <!-- 作者 -->
    <meta name="revised" content="1024招聘.v3, 2019/05/01" />
    <!-- 定义页面的最新版本 -->
    <meta name="description" content="网站简介" />
    <!-- 网站简介 -->
    <meta name="keywords" content="搜索关键字，以半角英文逗号隔开" />
    <title>1024招聘</title>
    <link href="~/css/shop.css" type="text/css" rel="stylesheet" />
    <link href="~/css/Sellerber.css" type="text/css" rel="stylesheet" />
    <link href="~/css/bkg_ui.css" type="text/css" rel="stylesheet" />
    <link href="~/font/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="~/layui/css/layui.css" rel="stylesheet" />
    <link href="~/layui/css/modules/laydate/default/laydate.css" rel="stylesheet" />
    <!-- 公共样式 开始 -->
    <link rel="stylesheet" type="text/css" href="~/css/base.css">
    <link rel="stylesheet" type="text/css" href="~/fonts/iconfont.css">
    <link rel="stylesheet" type="text/css" href="~/layui/css/layui.css">
    <script type="text/javascript" src="~/framework/jquery-1.11.3.min.js"></script>
    <script src="~/layui/layui.js"></script>
    <script type="text/javascript" src="~/layui/layui.js"></script>
    <script src="~/framework/cframe.js"></script><!-- 仅供所有子页面使用 -->
    <script src="~/js/laydate/laydate.js" type="text/javascript"></script>
    <!-- 公共样式 结束 -->

    <style>

        .layui-table img {
            max-width: none;
        }
    </style>

</head>

<body>
    <img src="file:///D:/Pic/a4f52bc7-a626-4c5c-b8b3-c236553f7365.png" alt="Alternate Text" />
    <div class="cBody">
        <div class="console">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <div class="layui-input-inline">
                        <input type="text" id="PicName" name="name" required lay-verify="required" placeholder="输入商品名称" autocomplete="off" class="layui-input">
                    </div>
                    <ul>
                        <li class="clearfix col-xs-2 col-lg-3 col-ms-3">
                            <label class="label_name col-xs-3 col-lg-3 "></label>
                            <select id="SelectOption" class="select Competence_sort col-xs-6 col-lg-6 " name="admin-role" size="1" id="Competence_sort">
                                <option value=null>--状态筛选--</option>
                                <option value=true>启用</option>
                                <option value=false>禁用</option>

                            </select>
                        </li>
                        <li class="clearfix col-xs-5 col-lg-5 col-ms-5 ">
                            <label class="label_name ">添加时间：</label>
                            <input class="laydate-icon col-xs-4 col-lg-3 form-control Select_Date" id="start" type="text" />
                            <span style=" float:left; padding:0px 10px; line-height:32px;"></span>

                            <div id="SearchTable" class="btn button_btn bg-deep-blue "><i class="fa  fa-search"></i>&nbsp;搜索</div>
                        </li>
                    </ul>
                    <a class="layui-btn" id="AddImg">新建图片模块</a>
                </div>
            </form>

            <script>
                layui.use('form', function () {
                    var form = layui.form;

                    //监听提交
                    form.on('submit(submitBut)', function (data) {
                        layer.msg(JSON.stringify(data.field));
                        return false;
                    });
                });</script>
        </div>

        <table id="Pircture_Table" class="layui-hide" lay-filter="test"></table>

        <!-- layUI 分页模块 -->
        <div class="h_55"></div>

        <script>
            layui.use('laypage', function () {
                var laypage = layui.laypage;

                //总页数大于页码总数
                laypage.render({
                    elem: 'pages'
                    , count: 100
                    , layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
                    , jump: function (obj) {
                        //					      console.log(obj)
                    }
                });
            });
            //修改规格
            function specificationsBut() {
                layui.use('layer', function () {
                    var layer = layui.layer;

                    //iframe层-父子操作
                    layer.open({
                        type: 2,
                        area: ['70%', '60%'],
                        fixed: false, //不固定
                        maxmin: true,
                        content: 'specifications_list.html'
                    });
                });

            }
            //修改按钮
            var updateFrame = null;
            function updateBut() {
                layui.use('layer', function () {
                    var layer = layui.layer;

                    //iframe层-父子操作
                    updateFrame = layer.open({
                        title: "商品信息修改",
                        type: 2,
                        area: ['70%', '60%'],
                        scrollbar: false,	//默认：true,默认允许浏览器滚动，如果设定scrollbar: false，则屏蔽
                        maxmin: true,
                        content: 'goods_update.html'
                    });
                });

            }</script>
    </div>
    <div id="Guestbook" style="display:none">
        <div class="content_style padding15">
            <div class="form-group" style="display:none">
                <label class="col-sm-2 control-label no-padding-right" for="form-field-1">时间: </label>
                <input class="col-sm-9" id="CreateTime" type="hidden" name="name" value="" />
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label no-padding-right" for="form-field-1">图片名称 </label>
                <input class="col-sm-9" id="PicNames" type="text" name="name" value="" />
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label no-padding-right" for="form-field-1"> 图片地址 </label>

                <div class="layui-upload-drag" id="goodsPic">
                    <img id="Imgs" src="#" alt="Alternate Text" style="display:none" />
                    <i class="layui-icon"></i>
                    <p>点击上传，或将文件拖拽到此处</p>
                </div>

                @*<input class="col-sm-9" id="Src" type="text" name="name" value="" />1*@
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label no-padding-right" for="form-field-1"> 备注 </label>
                <textarea name="图片备注" class="form-control" id="Remark" placeholder="" onkeyup="checkLength(this);"></textarea>

            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label no-padding-right" for="form-field-1"> 类型 </label>
                <select id="TypeId" class="select Competence_sort col-xs-6 col-lg-6 " name="admin-role" size="1">
                    <option value="0">--图片类型--</option>
                    <option value="1">轮播图</option>
                    <option value="2">背景图</option>
                    <option value="3">微信图</option>
                    <option value="4">微博图</option>
                </select>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label no-padding-right" for="form-field-1"> 状态 </label>
                <select id="Status" class="select Competence_sort col-xs-6 col-lg-6 " name="admin-role" size="1">
                    <option value=true>true</option>
                    <option value=false>false</option>
                </select>
            </div>
        </div>
    </div>
</body>

</html>
<script type="text/html" id="staor">
    <input type="checkbox" name="yyy" lay-skin="switch" lay-filter="switchTest" value="{{d.PicId}}" lay-text="启用|禁用" {{d.Status?'checked':''}} />
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="update">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    function Guestbook_iew(id) {
        var index = layer.open({
            type: 1,
            title: '修改信息',
            maxmin: true,
            shadeClose: false,
            area: ['600px', ''],
            content: $('#Guestbook'),
            btn: ['确定', '取消'],
            yes: function (index, layero) {


                layer.alert('确定修改该内容？', {
                    title: '提示框',
                    icon: 0,
                    btn: ['确定', '取消'],
                    yes: function (index) {
                        //ajax
                        var data = {};
                        data.PicId = id;
                        data.PicName = $("#PicNames").val();
                        data.Src= $("#Imgs").attr("src");
                        data.Remark= $("#Remark").val();
                        data.TypeId= $("#TypeId").val();
                        data.Status = $("#Status").val();
                        data.CreateTime = $("#CreateTime").val();

                        $.ajax({
                            type: "post",
                            data: data,
                            url: "/Picture/UpdatePictureInfo",
                            success: function (data) {
                                if (data.Success) {
                                    layer.msg('修改成功');
                                    location.reload();
                                } else {
                                    layer.alert('修改失败！', {
                                        title: '提示框',
                                        icon: 1,
                                    });
                                }
                            }
                        });
                        layer.closeAll();
                    }
                });

            }
        })
    }


    function Format(datetime, fmt) {
    var newtime = datetime.replace(/\/Date\((\d+)\)\//gi, "$1");
    if (parseInt(newtime) == newtime) {
        if (newtime.length == 10) {
            newtime = parseInt(newtime) * 1000;
        } else if (newtime.length == 13) {
            newtime = parseInt(newtime);
        }
    }
    newtime = new Date(newtime);
    var o = {
        "M+": newtime.getMonth() + 1,                 //月份
        "d+": newtime.getDate(),                    //日
        "h+": newtime.getHours(),                   //小时
        "m+": newtime.getMinutes(),                 //分
        "s+": newtime.getSeconds(),                 //秒
        "q+": Math.floor((newtime.getMonth() + 3) / 3), //季度
        "S": newtime.getMilliseconds()             //毫秒
    };
    if (/(y+)/.test(fmt))
        fmt = fmt.replace(RegExp.$1, (newtime.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt))
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
}

    layui.use('table', function () {
        var table = layui.table,
            form = layui.form;
        //第一个实例
        table.render({
            elem: "#Pircture_Table",
            height: 400,
            url: '/Picture/SelectPitureTable',
            page: true,
            cols: [[ //表头
            { field: 'PicName', width:'250',align: 'center', title: '图片名称',  }
            , { field: 'Src', width:'250', title: '缩略图',templet:'<div><img src="{{d.Src}}"></div>',  }
            , { field: 'Remark',width:'170', align: 'center', title: '备注',  }
            , { field: 'TypeName',width:'150', align: 'center', title: '图片类型', }
            , { field: 'Status', width: 100, title: '状态', toolbar: '#staor' }
            , { field: 'CreateTime',width:'250', align: 'center', title: '创建时间',  templet: "<div>{{Format(d.CreateTime,'yyyy-MM-dd hh:mm:ss')}}</div>" }
            , { fixed: 'right', width: 165,  toolbar: '#barDemo'}
            ]]
        })

        //监听工具条
        table.on('tool(test)', function (obj) {


            ///删除友情链接操作
            var data = obj.data;
            var id = data.PicId;
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del();
                    layer.close(index);
                    $.ajax({
                        url: "/Picture/DeletePictureInfo?id=" + id,
                        type: "post",
                        success: function (json) {
                            if (json.Success) {
                                layer.alert('删除成功！', {
                                    title: '提示框',
                                    icon: 1,
                                });
                                obj.del();
                                layer.close(index);
                            } else {
                                layer.alert('删除失败!', {
                                    title: '提示框',
                                    icon: 1,
                                })
                            }
                        }
                    })
                });
            } else if (obj.event === 'update') {
                $("#CreateTime").val(Format(data.CreateTime,"yyyy-MM-dd"));
                $("#PicNames").val(data.PicName);
                $("#Src").val(data.Src);
                $("#Remark").val(data.Remark);
                $("#TypeId").val(data.TypeId);
                data.Status?$("#Status").val("true"):$("#Status").val("false");
                Guestbook_iew(data.PicId);

            }
        })

        $("#SearchTable").click(function () {
            table.reload('Pircture_Table', {
                where: {
                    PicName: $("#PicName").val(),
                    Status: $("#SelectOption").val(),
                    CreateTime:$("#NowDate").val()
                }
            });
        })

        $("#AddImg").click(function () {
            location.href="/Picture/PictureAdd";
        })

        //修改状态
            layui.use(['form', 'layedit', 'laydate'], function () {
            var form = layui.form
            //监听指定开关
            form.on('switch(switchTest)', function (obj) {
                 var data = {};
                data.PicId = this.value;
                data.Status = obj.elem.checked;
                $.ajax({
                    type: "post",
                    url: "/Picture/UpdatePictureStar",
                    data: data,
                    success: function (json) {
                        if (json) {
                            layer.alert('已修改！', {
                                title: '提示框',
                                icon: 1,
                            });
                        } else {
                            layer.alert('修改失败！', {
                                title: '提示框',
                                icon: 1,
                            });
                            layer.close(MenuSection);
                        }
                    }
                });
            });
        });

    });

    /******时间设置*******/
    var start = {
        elem: '#start',
        format: 'YYYY-MM-DD',
        // min: laydate.now(), //设定最小日期为当前日期
        max: '2099-06-16', //最大日期
        istime: true,
        istoday: false,
        choose: function (datas) {
            end.min = datas; //开始日选好后，重置结束日的最小日期
            end.start = datas //将结束日的初始值设定为开始日
        }
    };
    var end = {
        elem: '#end',
        format: 'YYYY-MM-DD',
        //min: laydate.now(),
        max: '2099-06-16',
        istime: true,
        istoday: false,
        choose: function (datas) {
            start.max = datas; //结束日选好后，重置开始日的最大日期
        }
    };
    laydate(start);
    laydate(end);
</script>
<script>
    //上传logo
    layui.use(['upload', 'layer', 'jquery'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            upload = layui.upload;

        //拖拽上传
        upload.render({
            elem: '#goodsPic'
            , headers: { token: 'sasasas' }
            , url: "/FileUpload/UploadImage"
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {

                    $("#goodsPic>img").attr("src", result);
                    $("#goodsPic>img").show();
                    $("#goodsPic>i").hide();
                    $("#goodsPic>p").hide();
                });
            }
            , done: function (res) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                } else {

                    $("#goodsPic>img").attr("src", res.Url);
                    return layer.msg('上传成功');
                    //return layer.msg(res.data.Data.Path);路径
                }
                //上传成功
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#test10');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        })
    })
</script>
